function Tab(el){
    //把el存起来
    this.el = document.querySelector(el)
    //什么是this.el  盒模型标签对象方便后续添加事件
    this.init()   //自身数据容易占内存，封装到公共函数中减少内存占用方便维护

}
Tab.prototype.init = function(){
    //移入鼠标切换
    //移除鼠标切换
    //...
    //这个封装函数的主要目的是存放各种特效名称
    this.overchange()
}
Tab.prototype.overchange = function(){
    //获取每个盒模型的li(不能用document,this.el是每个最大盒模型的标签对象)
    let liObj = this.el.querySelectorAll('ul li')
    //遍历
   
    liObj.forEach((item,i) => {
        //给li绑定移入事件
        item.onmouseover =  ()=>{
            //把带有class=active的li的class清空
            // console.log(this.el)
            this.el.querySelector('ul li.active').className =''
            //给每个li标签对象添加class 
            liObj[i].className = 'active'
            //同步内容
            this.el.querySelector('ol li.active').className=''
            this.el.querySelectorAll('ol li')[i].className = 'active'
        }
    
    })
    
}